<template>
  <Modal
      :draggable="draggable"
      transfer reset-drag-position sticky
      :footer-hide="false"
      :closable="false"
      :mask-closable="false"
      :mask="mask"
      :fullscreen="isFullscreen"
      :value="toolShow"
      :width="width"
      :title="title"
      :styles="{maxWidth: '1280px'}"
      @on-ok="submit"
      @on-cancel="close"
      @on-visible-change="changeVisible"
      class="c-jConfig"
    >
    <div slot="header" style="display: flex;justify-content: space-between;align-items: center">
      <div :class="['ivu-modal-header-inner']">{{ title }}</div>
      <div style="display: flex">
        <Icon custom="i-icon i-icon-full-screen" style="cursor: pointer;margin:0 5px;" v-show="!isFullscreen" @click="isFullscreen=!isFullscreen" />
        <Icon custom="i-icon i-icon-exit-full-screen" style="cursor: pointer;margin:0 5px;" v-show="isFullscreen" @click="isFullscreen=!isFullscreen" />
      </div>
    </div>
    <div style="min-height: 300px">
      <starGrid :row="'100%'" :column="'200px auto'" :area="'left right'" style="height:100%;">
        <Tabs value="asset" style="border-style:solid;border-width:1px;border-color:#eee;border-radius: 5px;grid-area: left;">
          <TabPane :label="$t(`compDesign.jProperty.asset`)" name="asset">
            <jAsset ref="asset" @deleteAsset="deleteAsset"></jAsset>
          </TabPane>
        </Tabs>
        <div v-show="switchShow" style="min-height: 400px;grid-area: right;overflow: hidden;">
        <div v-if="compGroup.currentId==='root'" >
          <Form :labelWidth="100" style="padding: 0 16px" lablePosition="center">
            <!-- <FieldItem v-model="currentModule.routing" labelType="blackMargin"
              :config="{type: 'select', options: compGroup.getRoutingOptions()}"
              :formItemProps="{label: $t(`compDesign.jProperty.routing`)}"
            />
            <FieldItem v-model="currentModule.workCenter" labelType="blackMargin"
              :config="{type: 'select', options: compGroup.getWorkCenterOptions()}"
              :formItemProps="{label: $t(`compDesign.jProperty.workCenter`)}"
            /> -->
            <jComment style="border: 1px solid #eee;border-radius: 5px;grid-area: right;margin-top: 6px"></jComment>
          </Form>
        </div>
        <Tabs v-else v-model="tableName" :animated="false"
          style="border-style:solid;border-width:1px;border-color:#eee;border-radius: 5px;grid-area: right;">
          <!-- cliEntityTable中包含table和多个form配置 -->
          <template v-if="['cliEntityTable', 'cliContainerTable'].includes(compGroup.currentItem.tag)">
            <TabPane :label="$t(`compDesign.jProperty.property`)" name="property">
              <jPropertyComm :baseProperty="compGroup.currentItem.tag" :key="compGroup.currentItem.id"/>
            </TabPane>
            <TabPane :label="$t(`compDesign.jProperty.searchFormProperty`)" name="searchFormProperty">
              <jPropertyComm baseProperty="cliSearchForm" :key="compGroup.currentItem.id+'search'"/>
            </TabPane>
            <TabPane :label="$t(`compDesign.jProperty.newFormProperty`)" name="newFormProperty">
              <jPropertyComm baseProperty="cliNewForm" :key="compGroup.currentItem.id+'new'"/>
            </TabPane>
            <TabPane :label="$t(`compDesign.jProperty.editFormProperty`)" name="editFormProperty">
              <jPropertyComm baseProperty="cliEditForm" :key="compGroup.currentItem.id+'edit'"/>
            </TabPane>
            <TabPane :label="$t(`compDesign.jProperty.readFormProperty`)" name="readFormProperty">
              <jPropertyComm baseProperty="cliReadForm" :key="compGroup.currentItem.id+'read'"/>
            </TabPane>
          </template>
          <TabPane :label="$t(`compDesign.jProperty.property`)" name="property" v-else >
            <jPropertyComm :key="compGroup.currentItem.id"/>
          </TabPane>
          <TabPane label="JSON" name="json">
              <vue-json-editor
                v-if="compGroup && compGroup.currentItem"
                :style="{ height: 'calc(100vh - 300px)' }"
                v-model="compGroup.currentItem.property"
                ref="_jsonEditor" lang="zh" mode="code"
                @json-change="onJsonChange"
                @json-save="updateProperty"
                @has-error="onError" />
          </TabPane>
        </Tabs>
        </div>
      </starGrid>
    </div>
    <!-- <div class="ivu-footer"> <Button @click="submit" class="ivu-mt" type="primary">确定</Button> </div> -->
  </Modal>
</template>

<script>
import storeVar from "../mixins/storeVar";
import jAsset from "./jAsset";
import jComment from "./jComment";
import jPropertyComm from "./jProperty";
import {mapActions, mapState} from "vuex";
import vueJsonEditor from 'vue-json-editor'

export default {
  name: "jConfig",
  components:{ 
    jAsset, jPropertyComm, jComment, vueJsonEditor
  },
  mixins:[storeVar],
  data () {
    return {
      switchShow: true,
      drag:false,
      isFullscreen: false,
      tableName: 'property',
    };
  },
  mounted() {
  },
  watch:{
    'compGroup.currentId'() {
      this.switchShow=false;
      this.$nextTick(()=>{
        this.switchShow=true;
        this.tableName='property'
      })
    }
  },
  computed:{
    ...mapState('compDesign/config',[
      'currentModule',//控件清单
    ]),
  },
  methods:{
    /**
     * 选中资产面板进行删除
     * @param item
     */
    deleteAsset(){
      this.deleteElement().then(flag=>{
        if(flag){
          this.setElement('root');
        }
      });
    },
    submit() {
      this.$emit('submit')
    },
    close() {
      this.$emit('close')
    },
    changeVisible(val) {
      // console.log("file: index.vue:146  changeVisible  val:", val)
      // 关闭配置弹窗时，自动更新property
      !val && this.compGroup.setClassProperty()
      !val && this.$emit('close')
    },
		onError() {},
		onJsonChange() {},
		updateProperty() {
			// this.compGroup.setClassProperty()
		},
  },
  props: {
    draggable:{
      default:()=>{
        return false;
      }
    },
    type:{
      default:()=>{
        return 'icon';
      }
    },
    text:{
      default:()=>{
        return '';
      }
    },
    icon:{
      default:()=>{
        return 'ios-apps-outline';
      }
    },
    title:{
      default:()=>{
        return '';
      }
    },
    mask: false,
    width:{
      default:()=>{
        return 90;
      }
    },
    toolShow:{
      default:()=>{
        return false;
      }
    }
  },
}
</script>

<style lang="less">
  .c-jConfig {
    .ivu-drawer {
      max-width: 1280px;
    }
    .ivu-modal {
      top: 30px;
    }
    .ivu-tabs-tabpane .property-editor >.ivu-row > .ivu-col:nth-child(2) {
      overflow-y: auto;
      min-height:400px;
      max-height: calc(~"100vh - 240px");
      &::-webkit-scrollbar {
        width: 8px;
      }
      // &::-webkit-scrollbar {
      //   display: none;
      // }
    }
  }
  .model-dropdownwp {
    max-height: calc(~"100vh - 240px");
    overflow: hidden auto;
    .ivu-cascader-menu {
      height: 100%;
    }
  }
</style>